<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 图表</el-breadcrumb-item>
                <el-breadcrumb-item>用户实时数据</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="schart">
        <div class="content-title">乐洗用户实时数据</div>
        <schart canvasId="pie" width="500" height="400" :data="data2" type="pie" :options="options2"></schart>
        <el-input style="opacity:0;" placeholder="请输入内容"></el-input>
        </div>
        <div class="schart">
        <div class="content-title">{{schoolname}}用户实时数据</div>
        <schart canvasId="ring" width="500" height="400" :data="schooldata" type="ring" :options="schooloptions"></schart>
            <el-input v-model="schoolname" style="width:200px;" placeholder="请输入查询学校"></el-input>
            <el-button type="primary" @click="search" :loading="loading">查询</el-button>
        </div>
    </div>
</template>

<script>
import Schart from 'vue-schart';
// import index from '../../../node_modules/_vue@2.5.13@vue';
    export default {
        components: {
            Schart
        },
        data: () => ({
          data2 : [
              { name: '关注总量', value: 0 },
              { name: '今日关注', value: 0 },
              { name: '取关总量', value: 0 },
              { name:'今日取关数', value: 0 },
              { name:'用户总量', value: 0 },
              { name:'今日用户数', value: 0 }
            ],
            options2: {
                title: '乐洗用户实时数据',
                bgColor: '#607d8b',
                titleColor: '#ffffff',
                legendColor: '#ffffff'
            },
            schoolRealTime: {
                student_day: undefined,
                deposit_day: undefined,
                service_day: undefined
            },
            schooldata: [{
                name: '今日学生数量',
                value: 0
            },{
                name: '今日交押金数量',
                value: 0
            },{
                name: '今日购买服务数量',
                value: 0
            }],
            schooloptions: {
                title: '学校实时状况',
                bgColor: '#607d8b',
                titleColor: '#ffffff',
                legendColor: '#ffffff'
            },
            schoolname: undefined,
            loading: false
        }),
        mounted () {
            // 获取乐洗用户实时数据
          APP.ajax('analysis/realTime', {}, res => {
            let params = ['sub_count', 'sub_day', 'unsub_count', 'unsub_day', 'user_count', 'user_day'];
            params.forEach((el, index) => {
                // vue.set 设置对象的属性。如果对象是响应式的，
                // 确保属性被创建后也是响应式的，同时触发视图更新
                // 这个方法主要用于避开vue不能检测数组对象更新的限制
                let obj = this.data2[index];
                obj.value = Number(res.data.data[el]);
                this.$set(this.data2, index, obj);
            });
          });
          APP.ajax('analysis/schoolRealTime', {id: 3}, res => {
            this.schoolRealTime = res.data.data;
            let params = ['student_day', 'deposit_day', 'service_day'];
              params.forEach((el, index) => {
                let obj = this.schooldata[index];
                obj.value = Number(res.data.data[el]);
                this.$set(this.schooldata, index, obj)
              });
          });
        },
        methods: {
            search() {
                this.loading = true;
                let params = {
                    province: '',
                    city: '',
                    area: '',
                    school_name: this.schoolname
                }
                APP.ajax('post@school/search', params, res => {
                    this.schoolname = res.data.data.data[0].school_name;
                    this.dataInit(res.data.data.data[0].id); 
                })
            },
            dataInit(val) {
                APP.ajax('analysis/schoolRealTime', {id: val}, res => {
                    this.schoolRealTime = res.data.data;
                    let params = ['student_day', 'deposit_day', 'service_day'];
                    params.forEach((el, index) => {
                        let obj = this.schooldata[index];
                        obj.value = Number(res.data.data[el]);
                        this.$set(this.schooldata, index, obj)
                    });
                    this.loading = false;
                })
            }
        }
    }
</script>

<style scoped>
    .schart{
        width: 600px;
        display: inline-block;
    }
    .content-title{
        clear: both;
        font-weight: 400;
        line-height: 50px;
        margin: 10px 0;
        font-size: 22px;
        color: #1f2f3d;
    }
</style>